<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>任务列表</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <link rel="stylesheet" href="./css/detail.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
	<script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
</head>
<body>
    <div id="app" v-cloak>
        <template v-if="!isPageLoading">
			<div class="container" :style="{'margin-bottom':showBtn && btnStatus==1?'calc(' + api.safeArea.bottom + 'px + 1.95rem)' : showBtn?'calc(' + api.safeArea.bottom + 'px + 1.35rem)':''}">
				<div class="taskBasic">
					<img v-if="isShowTaskDetail && taskLink.diffculty_level != 0" :src="'../../../image/task/task_level_'+taskLink.diffculty_level+'.png'" class="taskGender"/>
					<div class="info clearfix">
						<img :src="taskLink.iconUrl" />
						<div>
							<h3 class="ell">
								{{taskLink.name}}
							</h3>
							<span class="ell">
								{{taskLink.createTime}}
							</span>
						</div>
					</div>
					<div class="progress">
						<i class="over" :style="{'width': taskLink.progressRatio}" ></i>
					</div>
					<div class="clearfix twoLine">
						<div class="inlineInfo price ell">
							悬赏价格：
							<font>
								{{taskLink.price}}
								<i>元</i>
							</font>
						</div>
						<div class="inlineInfo ell">
							{{
								acceptId ? '接单' : '任务'
							}}状态：
							<font>
								{{
									statusSpec
								}}
							</font>
						</div>
					</div> 
					<div class="inlineInfo u-require">
						<span class="_title">
								任务要求：
						</span>
						<span class="canSelect">{{taskLink.claim}}</span>
					</div>
					<template
						v-if="isShowTaskDetail"
					>
						<div class="clearfix twoLine">
							<div class="inlineInfo ell">
								当前进度：
								<font>
									{{taskLink.progressRatio}}
								</font>
							</div>
							<div class="inlineInfo ell">
								审核时间：
								<font>
									{{taskLink.auditTime}}
									分钟内
								</font>
							</div>
							<!-- <div class="inlineInfo ell">
								有子任务：
								<font>{{taskDetails.pre_task_id==0?'无':'有'}}</fousernt>
							</div> -->
						</div>
						<div class="clearfix twoLine">
							<div class="inlineInfo ell">
								编号 ID：
								<font>
									{{taskLink.id}}
								</font>
							</div>
							<div class="inlineInfo ell">
								任务限制：
								<font>
									{{taskLink.limit}}
								</font>
							</div>
						</div>
						<div class="inlineInfo person ell flex">
							悬赏人：
							<img :src="taskLink.pubImg" />
							<font class="oneOmit"
								style="width: 3rem"
							>
							{{taskLink.pubName}}
							</font>
						</div>
						<div class="inlineInfo times disbox">
							<div class="ell disflex">
							任务到期：
								<font>
									{{taskEndTime.spec}}
								</font>
							</div>
							<i
								@click="selectComplain"
							>
								投诉
							</i>
						</div>
						<div class="noticeLook" 
							v-if="taskWran"
							@click="lookOverWarn"
						>
							注意事项，点击查看
						</div>
					</template>
					<div class="showMore"
						@click="handleShowDetail"
					>
						<img
							src="../../../image/task/bottom.png"
							class="dire_bottom"
							:class="{'show': isShowTaskDetail}"
						/>
					</div>
				</div>
				<div class="instroduce clearfix">
					<div class="ell">
						<img src="../../../image/task/taskdetail1.png" />极速做单
					</div>
					<div class="ell">
						<img src="../../../image/task/taskdetail2.png" />闪电审核
					</div>
					<div class="ell">
						<img src="../../../image/task/taskdetail3.png" />大量任务
					</div>
				</div>
				<div class="m-step">
					<div class="step stepDom">
						<div class="ftitle">任务步骤</div>
						<div class="step_content clearfix"
							v-for="(stepItem,stepIndex) of taskSteps"
							:key="stepIndex"
						>
							<i>{{stepIndex + 1}}</i>
							<div class="info">
								<h3 class="h3">
									第
										{{stepIndex + 1}}
									步
									<i v-if="isCollect(stepItem)">
										有收集
									</i>
								</h3>
								<template
									v-for="(cntItem,contIndex) of stepItem"
									:key="stepIndex + contIndex"
								>
									<template
										v-if="cntItem.type === 'Description'"
									>
										<div class="intrText">
											{{cntItem.value}}
										</div>
									</template>
									<template
										v-if="cntItem.type === 'Operable'"
									>
										<div class="btnText" >
											<div class="text">
												<!-- <div> -->
													{{cntItem.target.type}}：
												<!-- </div> -->
												<span class="_link copyDom"
													@click="handCoypLink(cntItem.target.value)"
												>
													{{isShowContentLink(cntItem.target.value)}}
												</span>
											</div>
											<div class="btn clearfix">
												<a v-for="(btns,btnIndex) of cntItem.target.content"
													@click="handleSpec(btns,cntItem.target.value)"
													:key="btnIndex"
												>
													{{btns.name}}
												</a>
											</div>
										</div>
									</template>
									<template  v-if="cntItem.type === 'CollectTextInfo'">
										<div class="task_input flex"
												@click="checkInput"
										>
											<input type="text"
												class="flex1"
												:disabled="btnStatus !=1"
												:placeholder="'请输入'+cntItem.placeholder"
												v-model="cntItem.value"
											/>
											<div  class="_select"
												v-if="isShowTextCache"
												@click="selectTextCache(stepIndex,contIndex)"
											>
											</div >
										</div>
									</template>
									<template
										v-if="Array.isArray(cntItem)"
									>
										<div class="img clearfix">
											<div v-for="(arrItem,arrIndex) of cntItem"
												:key="arrItem.type + arrIndex"
												class="item"
												@click="handleImg(arrItem.type,arrItem,stepIndex,contIndex,arrIndex)"
											>

												<img
													class="comImgwh"
													:src="selectShowImg(arrItem.type,arrItem,stepIndex,contIndex,arrIndex)"
												/>
												<span
													v-if="arrItem.type === 'Gallery'"
												>
													示例图
												</span>
											</div>
										</div>
									</template>
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="footer" :style="{'padding-bottom':api.safeArea.bottom + 'px'}" v-if="showBtn">
				<div class="fixed-btn m-btn">
				    <div class="_wrap"
						:class="btnStyleShow"
				        @click="handleBtnClick"
				    >
				        {{
							btnText
						}}
				    </div>
				    <div class="u-hint"
				        v-if="btnStatus == 1"
				    >
						还剩
							{{commitResidueText}}
						可以提交任务,你可以
						<span style="color:#4a9fff"
							@click="giveUpTaskApi"
						>放弃</span>
				    </div>
				</div>
			</div>
		</template>
		<template v-else>
			<div class="loadFull whiteBg pageload">
				<div class="se-loading"></div>
			</div>
		</template>
	</div>
	<script src="./js/detail.js"></script>
</body>

</html>
